@prefix: ~'vue-scroller-bars';

.@{prefix}{
	&-wraper{
		height: 100%;
    	width: 100%;
		overflow: hidden;
		position: relative;
		&.show-when-hover{
			.@{prefix}-scroll{
				opacity: 0;
			}
			.@{prefix}-place-holder{
				opacity: 0;
			}
		}
		&.show-when-hover:hover{
			.@{prefix}-scroll{
				opacity: 1;
			}
			.@{prefix}-place-holder{
				opacity: 1;
			}
		}
	}
	&-content{
		position: absolute;
		min-width: 100%;
		left: 0;
		top: 0;
	}
	&-scroll{
		position: relative;
		transition: opacity .3s ease .2s;
		background: rgba(250, 250, 250, 1);
		box-sizing: border-box;
		padding: 1px 2px;
		z-index: 9999999;
		&:hover &-bar{
			background: rgb(100, 100, 100);
		}
		&-y{
			width: 14px;
			height: 100%;
			float: right;
			border-left: 1px solid rgba(190, 190, 190, .5);
			border-right: 1px solid rgba(190, 190, 190, .5);
			&.scroll-y-cover{
				position: absolute;
				right: 0px;
				top: 0px;
			}
		}
		&-x{
			width: 100%;
			height: 14px;
			float: right;
			border-top: 1px solid rgba(190, 190, 190, .5);
			border-bottom: 1px solid rgba(190, 190, 190, .5);
			&.scroll-x-cover{
				position: absolute;
				left: 0px;
				bottom: 0px;
			}
		}
		&-bar{
			background: rgba(190, 190, 190, 1);
			position: absolute;
			border-radius: 4px;
			transition: background .2s ease;
			&-y{
				width: ~'calc(100% - 4px)';
				min-height: 14px;
			}
			&-x{
				height: ~'calc(100% - 4px)';
				min-width: 14px;
			}
		}
	}
	&-place-holder{
		position: absolute;
		transition: opacity .3s ease .2s;
		right: 0px;
		bottom: 0px;
		width: 14px;
		height: 14px;
		background: rgba(250, 250, 250, 1);
	}
}